<!--
 * @Author: wangzhichiao<https://github.com/wzc570738205>
 * @Date: 2020-05-25 15:39:24
 * @LastEditors: wangzhichiao<https://github.com/wzc570738205>
 * @LastEditTime: 2020-05-29 08:57:41
 -->
<template>
  <div>
    <el-steps :active="active" space="200px" align-center>
      <el-step
        @click.native="changeStep(1)"
        title="基础设置"
        icon="el-icon-setting"
      ></el-step>
      <el-step
        @click.native="changeStep(2)"
        title="表单设计"
        icon="el-icon-edit-outline"
      ></el-step>
      <!--    <el-step
        @click.native="changeStep(3)"
        title="高级设置"
        icon="el-icon-s-operation"
      ></el-step> -->
    </el-steps>
    <BaseSeting
      v-show="active === 1"
      ref="baseSeting"
      :baseSeting="baseSeting"
    />
    <el-row :gutter="10" v-show="active === 2">
      <el-col :span="6">
        <Field @field-click="fieldClick" />
      </el-col>
      <el-col :span="12">
        <Control
          ref="fromSeting"
          @clickEvent="clickEvent"
          :fieldData="fieldData"
          :fromSeting="fromSeting"
          @handleDialogClose="$emit('handleDialogClose')"
          @handleFormDesignSave="handleFormDesignSave"
          @handleFormDesignView="handleFormDesignView"
        />
      </el-col>
      <el-col :span="6">
        <FieldSeting :cLickData="cLickData" @change="change" />
      </el-col>
    </el-row>
    <viewDialog
      :title="title"
      :data="viewData"
      :show.sync="dialogVisible"
      @success="getFormList"
    />

    <div class="footer">
      <el-button
        type="primary"
        icon="el-icon-document-checked"
        @click="handleFormDesignSave"
        >保存</el-button
      >
      <el-button
        class="close"
        icon="el-icon-close"
        @click="$emit('handleDialogClose')"
        >关闭</el-button
      >
    </div>
  </div>
</template>

<script>
import Field from './Field'
import Control from './Control'
import FieldSeting from './FieldSeting'
import viewDialog from './viewDialog'
import BaseSeting from './BaseSeting'
import axios from 'axios'

export default {
  components: { Field, Control, FieldSeting, viewDialog, BaseSeting },
  props: {
    formMaking: {
      type: Object,
      required: true,
      default: () => {}
    }
  },
  data() {
    return {
      fieldData: {}, // 左侧
      cLickData: {}, // 中间
      viewData: null,
      dialogVisible: false,
      active: 1,
      baseSeting: {}, // 基础设置
      fromSeting: [], // 表单设计
      title: '预览' // 预览title
    }
  },
  created() {},
  /*   updated() {
    console.log(this.formMaking)
    this.active = 1
    if (this.formMaking.formMaking.baseSeting) {
      this.$refs.baseSeting.formModel = this.formMaking.formMaking.baseSeting
    }
    if (this.formMaking.formMaking.fromSeting) {
      this.$refs.fromSeting.elementList = this.formMaking.formMaking.fromSeting
    }
  }, */
  methods: {
    changeStep(e) {
      this.active = e
    },
    // 左侧字段点击
    fieldClick(data) {
      console.log(data)
      this.fieldData = JSON.parse(JSON.stringify(data))
    },
    // 中间区域视图点击
    clickEvent(data) {
      this.cLickData = JSON.parse(JSON.stringify(data))
    },
    // 右侧改变
    change(data) {
      console.log(data)
      this.fieldData = JSON.parse(JSON.stringify(data))
    },
    // 保存
    handleFormDesignSave(data) {
      this.viewData = JSON.parse(JSON.stringify(data))
      /*      console.log(this.$refs.baseSeting.formModel)
      console.log(this.$refs.fromSeting.elementList)
      console.log(
        this.$refs.baseSeting.$refs.step1Config.validate(validate => {
          console.log(validate)
        })
      ) */
      /*      let item = this.$refs.fromSeting.elementList.find(
        e => e.type === 'hidden'
      )
      if (!item) {
        this.$refs.fromSeting.elementList[this.$refs.fromSeting.elementList.length] = {
          type: 'hidden',
          field: 'id',
          value: ''
        }
      } */
      let fromSeting = this.$refs.fromSeting.elementList
      fromSeting.forEach((el, dx) => {
        this.$set(fromSeting[dx], 'active', false)
      })
      let obj = {
        ...this.$refs.baseSeting.formModel,
        fromSeting: fromSeting
      }
      this.$emit('handleFormDesignSave', obj)
    },
    // 预览
    handleFormDesignView(data) {
      console.log(data)
      this.title = JSON.parse(
        JSON.stringify(this.$refs.baseSeting.formModel.formName)
      )
      this.viewData = JSON.parse(JSON.stringify(data))
      this.viewData.forEach(res => {
        if (res.type === 'select' && res.selectSet) {
          axios({
            method: 'get',
            url: res.selectSet.url
          }).then(data => {
            data.data.forEach(e => {
              e.label = e[res.selectSet.label]
              e.value = e[res.selectSet.value]
            })
            res.options = data.data
            this.viewData = JSON.parse(JSON.stringify(this.viewData))
          })
        }
      })
      this.dialogVisible = true
    }
  },
  watch: {
    formMaking: {
      handler(newValue, oldValue) {
        console.log(newValue)
        if (!newValue) {
          return
        }
        if (newValue) {
          // this.$refs.baseSeting.formModel = this.formMaking.formMaking.baseSeting
          this.baseSeting = newValue
        }
        if (this.formMaking.fromSeting) {
          this.fromSeting = newValue.fromSeting

          ///  this.$refs.fromSeting.elementList = this.formMaking.formMaking.fromSeting
        }
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style lang="stylus" scoped>
>>> .el-steps
  display flex
  justify-content center
  margin-bottom 40px
>>> .el-step__icon
  cursor pointer
.footer
  display flex
  justify-content flex-end
  padding-right 20px
</style>
